@keyframes fade-in-demo-tabs {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.95) skewX(-2deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}

.root {
  padding-top: 100px;
  padding-bottom: 100px;
  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));

  @media (max-width: $mantine-breakpoint-sm) {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.controls {
  position: relative;
}

.controlsIndicator {
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
  border: 1px solid light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4));
  box-shadow: var(--mantine-shadow-md);
  border-radius: var(--mantine-radius-md);
  transition: transform 250ms ease;
  z-index: 2;
}

.control {
  width: 100%;
  padding: var(--mantine-spacing-md) var(--mantine-spacing-lg);
  border-radius: var(--mantine-radius-md);
  position: relative;
  height: 80px;

  @mixin hover {
    background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-8));
  }

  @media (max-width: $mantine-breakpoint-sm) {
    height: 60px;
    padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
  }
}

.controlInner {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 3;
}

.controlTitle {
  font-weight: 700;
  font-family: var(--docs-font-primary);
  position: relative;
  z-index: 5;

  @media (max-width: $mantine-breakpoint-sm) {
    font-size: var(--mantine-font-size-sm);
  }
}

.controlDescription {
  @media (max-width: $mantine-breakpoint-sm) {
    font-size: var(--mantine-font-size-xs);
  }
}

.controlIcon {
  color: light-dark(var(--mantine-color-blue-6), var(--mantine-color-blue-5));
  margin-right: var(--mantine-spacing-md);

  @mixin rtl {
    margin-right: 0;
    margin-left: var(--mantine-spacing-md);
  }
}

.demo {
  padding-left: calc(var(--mantine-spacing-xl) * 2);

  &[data-should-animate] {
    animation: fade-in-demo-tabs 300ms ease;
  }

  @mixin rtl {
    padding-right: calc(var(--mantine-spacing-xl) * 2);
    padding-left: 0;
  }

  @media (max-width: $mantine-breakpoint-md) {
    padding-left: 0;
    padding-top: var(--mantine-spacing-xl);

    @mixin rtl {
      padding-right: 0;
    }
  }
}
